import { Button, RadioChangeEvent } from 'antd';
import { Modal, Radio } from 'antd';
import { useState } from 'react';

const SelectRole = (props: any) => {
  const { isOpenSelectRole, handleOkSelectRole, handleCancelSelectRole, list } = props;
  const [value, setValue] = useState('');
  console.log(list);

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  return (
    <Modal
      open={isOpenSelectRole}
      onCancel={handleCancelSelectRole}
      footer={[
        <Button key="submit" type="primary" onClick={() => handleOkSelectRole(value)}>
          Submit
        </Button>,
      ]}
    >
      <>
        <Radio.Group onChange={onChange} value={value}>
          {list.map((item: any) => {
            return (
              <Radio value={item.id} key={item.id}>
                {item.name}
              </Radio>
            );
          })}
        </Radio.Group>
      </>
    </Modal>
  );
};

export default SelectRole;
